<!--
 * @Author: MuQuanyu(MQy)
 * @Date: 2025-10-11 14:35:35
 * @LastEditTime: 2025-10-11 14:40:17
 * @email: muquanyu@outlook.com
-->
<template>
  <div class="loading-container">
    <svg
      :width="props.size"
      :height="props.size"
      viewBox="0 0 50 50"
      xmlns="http://www.w3.org/2000/svg"
      class="loading-svg"
    >
      <circle
        cx="25"
        cy="25"
        r="20"
        fill="none"
        stroke-width="5"
        stroke="currentColor"
        stroke-dasharray="126.92"
        stroke-dashoffset="0"
        :stroke="props.color"
        class="circle-path"
      />
    </svg>
  </div>
</template>

<script setup>
import { ref, watchEffect } from "vue";

const props = defineProps({
  color: String,
  size: Number,
});

// 可通过 watchEffect 来修改动画的颜色、大小等
// watchEffect(() => {
//   document.documentElement.style.setProperty("--loading-color", color.value);
//   document.documentElement.style.setProperty("--loading-size", `${size.value}px`);
// });
</script>

<style scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-svg {
  animation: rotate 2s linear infinite;
}

.circle-path {
  animation: dash 1.5s ease-in-out infinite;
  transform-origin: 50% 50%;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 126.92;
  }
  50% {
    stroke-dashoffset: 63.46;
  }
  100% {
    stroke-dashoffset: 126.92;
  }
}
</style>
